<template>
  <!-- 这里是状态栏 -->
  <view class="status_bar"></view>

  <!-- 用户页 -->
  <view class="user pageBg" v-if="userIPList">
    <!-- 用户信息 -->
    <view class="user-title">
      <image src="../../static/logo.png"></image>
      <text class="h1-style">{{ userIPList.IP }}</text>
      <text class="gray">来自：{{ userIPList.address.province }}</text>
    </view>

    <!-- 设置 -->
    <view class="settings">
      <navigator url="/pages/FenLeiList/index?name=我的下载&type=download">
        <view class="box">
          <view class="left">
            <uni-icons type="download-filled" size="20"></uni-icons>
            <text>我的下载</text>
          </view>
          <view class="right">
            <text>{{ userIPList.downloadSize }}</text>
            <uni-icons type="right" size="20" color="gray"></uni-icons>
          </view>
        </view>
      </navigator>

      <navigator url="/pages/FenLeiList/index?name=我的评分&type=score">
        <view class="box">
          <view class="left">
            <uni-icons type="star-filled" size="20"></uni-icons>
            <text>我的评分</text>
          </view>
          <view class="right">
            <text>{{ userIPList.scoreSize }}</text>
            <uni-icons type="right" size="20" color="gray"></uni-icons>
          </view>
        </view>
      </navigator>

      <navigator url="/pages/FenLeiList/index">
        <view class="box">
          <view class="left">
            <uni-icons type="chatboxes-filled" size="20"></uni-icons>
            <text>联系客服</text>
          </view>
          <view class="right">
            <uni-icons type="right" size="20" color="gray"></uni-icons>
          </view>
        </view>
      </navigator>

      <!-- #ifdef MP -->
      <button open-type="contact">联系客服</button>
      <!-- #endif -->

      <!-- #ifndef MP -->
      <button @click="add">拨打电话</button>
      <!-- #endif -->
    </view>

    <view class="settings-two">
      <navigator url="/pages/ClassList/index">
        <view class="box">
          <view class="left">
            <uni-icons type="notification-filled" size="20"></uni-icons>
            <text>订阅更新</text>
          </view>
          <view class="right">
            <uni-icons type="right" size="20" color="gray"></uni-icons>
          </view>
        </view>
      </navigator>

      <navigator url="/pages/ClassList/index">
        <view class="box">
          <view class="left">
            <uni-icons type="flag-filled" size="20"></uni-icons>
            <text>常见问题</text>
          </view>
          <view class="right">
            <uni-icons type="right" size="20" color="gray"></uni-icons>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getUserIpAPI } from "@/api/apis.js";
const userIPList = ref([]);
// 用户IP地址及省份
const userIP = async () => {
  const res = await getUserIpAPI();
  userIPList.value = res.data.data;
  console.log(res);
};

// 联系客服
const add = () => {
  uni.makePhoneCall({
    phoneNumber: "19310762325",
  });
};

userIP();
</script>

<style lang="scss" scoped>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.user {
  padding: 30rpx;
  padding-top: 120rpx;
  text-align: center;

  .user-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 290rpx;
    margin-bottom: 100rpx;

    .h1-style {
      font-size: 40rpx;
      font-weight: 500;
    }

    .gray {
      color: gray;
    }

    image {
      width: 160rpx;
      height: 160rpx;
      margin: 0 auto;
      border-radius: 50rpx;
    }
  }

  .settings,
  .settings-two {
    position: relative;
    overflow: hidden;
    border-radius: 10rpx;
    box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
    border: 1px solid rgba(128, 128, 128, 0.5);

    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100rpx;
      overflow: hidden;
      border-bottom: 1rpx solid rgba(128, 128, 128, 0.438) !important;

      .left {
        display: flex;
        align-items: center;
        margin-left: 20rpx;

        :deep() {
          .uni-icons {
            color: $brand-theme-color !important;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        color: rgba(128, 128, 128, 0.5);
      }
    }

    .box:last-child {
      border-bottom: none;
    }

    button {
      position: absolute;
      bottom: 0;
      width: 100%;
      opacity: 0;
    }
  }

  .settings-two {
    margin-top: 50rpx;
  }
}
</style>
